<template>
    <div class="bg-white p-[20px]">
        <div class="flex justify-between items-center mb-[10px]">
            <span class="text-[16px]">文件分组</span>
            <a-button type="primary" @click="addEvent">添加分组</a-button>
        </div>
        <div>
            <a-tabs v-model:activeKey="searchTable.type" @change="changeTab">
                <a-tab-pane key="image" tab="图片"></a-tab-pane>
                <a-tab-pane key="video" tab="视频"></a-tab-pane>
                <a-tab-pane key="file" tab="文件"></a-tab-pane>
            </a-tabs>
            <a-table :columns="columns" :data-source="searchTable.data" :pagination="false"
                :loading="searchTable.loading">
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-button type="link" @click="editEvent(record)">编辑</a-button>
                        <a-button type="link" @click="deleteEvent(record)">删除</a-button>
                    </template>
                </template>
            </a-table>
        </div>
        <edit-group ref="editModal" @complete="initData" />
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
import editGroup from './components/edit-group.vue';
import { fileGroupList, deleteFileGroup } from '@/utils/api/file';

const searchTable = reactive({
    type: 'image',
    loading: false,
    data: [],
})

const changeTab = (key: string) => {
    searchTable.type = key;
    initData();
}

const columns = [
    {
        title: '序号',
        dataIndex: 'group_id',
        key: 'group_id',
        width: '10%',
    },
    {
        title: '名称',
        dataIndex: 'group_name',
        key: 'group_name',
        width: '60%',
    },
    {
        title: '排序',
        dataIndex: 'sort',
        key: 'sort',
        width: '10%',
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        width: '20%',
    },
];

onMounted(() => {
    initData();
});

// 初始化数据
const initData = () => {
    fileGroupList({ type: searchTable.type }).then((res: any) => {
        searchTable.data = res.data;
    }).catch(() => {
        searchTable.loading = false;
    })
};

const editModal: Record<string, any> | null = ref(null);

const addEvent = () => {
    editModal.value.setFormData(null);
    editModal.value.setFileType(searchTable.type);
    editModal.value.showModal = true;
}

const editEvent = (data: any) => {
    editModal.value.setFormData(data);
    editModal.value.showModal = true;
}

const deleteEvent = (data: any) => {
    Modal.confirm({
        title: '删除分组',
        icon: createVNode(ExclamationCircleOutlined),
        content: '确定要删除分组吗？删除后将无法恢复！',
        okType: 'danger',
        onOk() {
            console.log('OK');
            deleteFileGroup({ group_id: data.group_id }).then((res: any) => {
                message.success(res.message);
                initData();
            })
        },
        onCancel() {
            console.log('Cancel');
        },
    });
}

</script>